<template>
  <div class="detailContainer">
    <!-- 头部 -->
    <van-sticky>
      <div class="header">
        <div class="title">
          <van-icon class="icon-home" name="wap-home-o" @click="toHome"/>
          <span>网易严选</span>
          <van-icon class="icon-search" name="search" @click="toSearch"/>
          <van-icon
            class="icon-shopping-cart-o"
            name="shopping-cart-o"
            badge
            @click="toCart"
          />
        </div>
      </div>
    </van-sticky>
    <!-- 详情图 -->
    <div class="img-container">
      <div class="side">
        <div class="detail">
          <img :src="skuInfo.skuDefaultImg" />
        </div>
      </div>
    </div>
    <!-- 描述价格 -->
    <div class="detailPrice">
      <div class="content">
        <div class="coll">
          <div class="top">
            <span>限时优惠</span>
          </div>
          <div class="bottom">
            <div class="currentPrice">
              <span style="font-size: 22px">¥</span>
              <span style="font-size: 32px">{{ skuInfo.price }}</span>
            </div>
            <div class="sale">
              <div class="finalPrice">
                <i>到手价5999</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- detailBaseInfo -->
    <div class="detailBaseInfo">
      <div class="baseInfo">
        <div class="info">
          <div class="title">{{ skuInfo.skuName }}</div>
          <div class="simpleBrandInfo">
            <div class="preLogo"></div>
            <img
              class="brandLogo"
              src="https://yanxuan-item.nosdn.127.net/87e08c87410fb13b6e42a077ccd15165.png"
            />
            <span class="text">网易严选</span>
          </div>
          <div class="desc">推荐理由</div>
        </div>
        <div class="commit">
          <div class="wrap">
            <div class="info-wrap">
              <div class="num">99.7%</div>
              <div class="com">好评率</div>
            </div>
            <i class="icon iconfont icon-youjiantou_huaban"></i>
          </div>
        </div>
      </div>
      <div class="rcmdBanner">
        <ul>
          <li>
            <div class="key">1</div>
            <div class="recommendReason">轻盈克重 轻装出行</div>
          </li>
          <li>
            <div class="key">2</div>
            <div class="recommendReason">独立收纳 便捷省心</div>
          </li>
          <li>
            <div class="key">3</div>
            <div class="recommendReason">丝柔贡缎 高支纯棉</div>
          </li>
        </ul>
      </div>
    </div>

    <div>
      <div class="tm-list">
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">邮费：</span>
            <span>满99包邮</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">促销：</span>
            <span>全场加价购</span>
            <span>超值换购</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">购物返：</span>
            <span>最高返</span>
            <span>15积分</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">请选择规格数量</span>
          </template>
        </van-cell>
        <van-cell-group>
          <van-cell>
            <span>限制：</span>
            <span>特价商品不可与优惠券叠加使用</span>
          </van-cell>
        </van-cell-group>
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">配送：</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">服务：</span>
          </template>
        </van-cell>
      </div>
    </div>

    <div class="detailImg">
      <div class="bigimg" v-for="(item, index) in skuImageList" :key="index">
        <img :src="item.imgUrl" />
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-button type="danger" text="立即购买" />
      <van-goods-action-button
        type="danger"
        text="加入购物车"
        @click="handleAddCart"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { reqDetailInfo, reqAddCart } from "../../api/index";
export default {
  name: "detail",
  data() {
    return {
      skuId: 0,
      skuInfo: {}, //商品信息
      skuNum: 1,
      skuId: 2,
      skuImageList: [],
    };
  },
  mounted() {
    const goodsId = this.$route.query.goodsId;
    this.skuId = goodsId;
    //获取商品信息
    this.getDetailInfo();
  },
  methods: {
    //跳首页
    toHome(){
      this.$router.push('/home');
    },
    //跳搜索
    toSearch(){
      this.$router.push('/search');
    },
    //跳购物车
    toCart(){
      this.$router.push('/cart');
    },
    //获取商品信息
    async getDetailInfo() {
      let { skuId } = this;
      let result = await reqDetailInfo(skuId);
      console.log(result);
      if (result.code === 200) {
        this.skuInfo = result.data.skuInfo;
        this.skuImageList = result.data.skuInfo.skuImageList;
        // console.log(this.skuImageList)
      }
    },
    //添加到购物车
    async handleAddCart() {
      let result = await reqAddCart(this.skuId, this.skuNum);
      console.log(result);
      if (result.code === 200) {
        this.$notify({ type: "primary", message: "加入成功" })
        this.$router.push("/cart");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.detailContainer {
  background: #eee;
  overflow: hidden;
  .header {
    width: 100%;
    height: 43px;
    border-bottom: 2px solid #fafafa;
    background-color: #fafafa;
    .title {
      line-height: 43px;
      width: 92%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      .icon-home {
        float: left;
        line-height: 43px;
      }
      span {
        width: 100%;
        margin-left: 100px;
        font-size: 20px;
      }
      .icon-search {
        float: right;
        line-height: 43px;
        margin-right: 15px;
      }
      .icon-shopping-cart-o {
        line-height: 43px;
        .van-info {
          margin-top: 10px;
        }
      }
    }
  }
  .img-container {
    .side {
      padding-top: 100%;
      overflow: hidden;
      width: 100%;
      position: relative;
      .detail {
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .detailPrice {
    display: flex;
    background: rgb(223, 25, 25);
    .content {
      width: 100%;
      height: 74px;
      display: flex;
      padding-left: 10px;
      .coll {
        width: 100%;
        height: 100%;
        padding-top: 6px;
        .top {
          width: 100%;
          height: 18px;
          line-height: 18px;
          margin-bottom: 10px;
          span {
            font-size: 12px;
            color: #fff;
          }
        }
        .bottom {
          width: 100%;
          height: 40px;
          overflow: hidden;
          .currentPrice {
            float: left;
            color: #fff;
            font-weight: 700;
            .renminbi {
              font-size: 18px;
            }
            .price {
              font-size: 42px;
            }
          }
        }
        .sale {
          background: #fff;
          border-radius: 25px;
          display: inline-block;
          height: 20px;
          margin-left: 5px;
          .finalPrice {
            font-size: 14px;
            color: rgb(250, 30, 50);
            text-align: center;
            font-weight: 700;
            i {
              margin: 0 5px;
            }
          }
        }
      }
    }
  }

  .detailBaseInfo {
    background: #fff;
    position: relative;
    padding: 18px 0 15px 15px;
    .baseInfo {
      display: flex;
      margin-top: 5px;
      .info {
        padding-right: 10px;
        flex: 1;
        .title {
          font-size: 14px;
          color: #333;
          line-height: 15px;
          margin-bottom: 6px;
          font-weight: 700;
        }
        .simpleBrandInfo {
          display: flex;
          margin-bottom: 5px;
          margin-top: 2px;
          height: 28px;
          align-items: center;
          .preLogo {
            width: 32px;
            height: 16px;
            margin-right: 6px;
            background: url(https://yanxuan.nosdn.127.net/6366944e4ac00118969787dedf9520e7.png)
              no-repeat;
            background-size: 100% 100%;
          }
          .brandLogo {
            width: 14px;
            height: 14px;
            margin-right: 8px;
          }
          .text {
            font-size: 12px;
            color: #7f7f7f;
            line-height: 18px;
            margin-right: 10px;
          }
        }
        .desc {
          font-size: 12px;
          color: #333;
          line-height: 18px;
          font-weight: lighter;
        }
      }
      .commit {
        display: flex;
        justify-content: center;
        width: 90px;
        align-items: center;
        .wrap {
          display: flex;
          font-size: 15px;
          align-items: center;
          text-align: center;
          padding-left: 10px;
          .info-wrap {
            .num {
              font-size: 16px;
              color: #dd1a21;
              text-align: center;
              font-weight: 700;
              line-height: 18px;
            }
            .com {
              font-size: 12px;
              margin-top: 3px;
              color: #7f7f7f;
            }
            i {
              margin-left: 5px;
            }
          }
        }
      }
    }
    .rcmdBanner {
      border: 1px solid #e6e6e6;
      border-radius: 6px;
      margin: 10px 17px 0 0;
      padding: 7px 10px;
      background: #fafafa;
      li {
        font-size: 12px;
        height: 19px;
        line-height: 19px;
        color: #333;
        .key {
          font-size: 12px;
          border: 1px solid #dd1a21;
          border-radius: 50%;
          color: #dd1a21;
          text-align: center;
          vertical-align: middle;
          font-weight: 700;
          width: 12px;
          height: 12px;
          line-height: 12px;
          display: inline-block;
          margin-right: 4px;
        }
        .recommendReason {
          vertical-align: middle;
          display: inline-block;
          height: 12px;
          line-height: 12px;
        }
      }
    }
  }
  .tm-list {
    border-top: 1px solid rgb(244, 244, 244);
    .van-cell::after {
      border-color: #7f7f7f;
    }
  }
  .detailImg {
    width: 100%;
    margin-top: 10px;
    .bigimg {
      width: 100%;
      height: 400px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .btnGroup {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    height: 80px;
  }
}
</style>